<template>
  <FigureCard :style="[{ width: state.width, height: state.height }, state.style]">
    <div class="v-figure-content">
      <div class="flex-row v-figure-label">
        {{ state.label }}
      </div>
      <div class="v-figure-chart" :id="state.id" :style="{ height: slotFooter ? 'calc(100% - 44px)' : 'calc(100% - 24px)' }">
      </div>
      <div class="flex-row v-figure-footer" v-if="slotFooter">
        <slot name="footer"></slot>
      </div>
    </div>
  </FigureCard>
</template>
<script setup>
  import { inject, useSlots, reactive, nextTick, getCurrentInstance, computed, onMounted, watch } from 'vue'
  import * as echarts from 'echarts'
  import 'echarts-liquidfill'
  import { tool } from '@v-model/shared--utils'
  import FigureCard from './FigureCard.vue'

  //判断<slot name="footer"/>是否有传值
  const slotFooter = !!useSlots().footer

  const props = defineProps({
    width: {
      type: [String],
      default: () => '100%',
    },
    height: {
      type: [String],
      default: () => '100%',
    },
    style: {
      type: [Object, String],
      default: () => {},
    },
    fontSize: {
      //图标大小、数字大小
      type: [String, Number],
      default: () => 24,
    },
    fontColor: {
      type: [String],
      default: () => '#000',
    },
    borderColor: {
      type: [String],
      default: () => '#000',
    },
    label: {
      type: [String],
      default: () => '',
    },
    value: {
      type: [String, Number],
      default: () => '00.00',
    },
    outline: {
      type: [Boolean, String],
      default: () => false,
    },
  })

  const state = reactive({
    id: '',
    label: props.label,
    value: props.value,
    width: props.width,
    height: props.height,
    style: props.style,
    fontSize: props.fontSize,
    fontColor: props.fontColor,
    borderColor: props.borderColor,
    outline: props.outline,
  })

  watch(
    () => props,
    (newVal, oldVal) => {
      init()
    },
    { deep: true }
  )

  let provideData = inject('provideData', null)
  const resizeHandle = computed(() => provideData().resize())

  watch(
    () => resizeHandle,
    () => {
      console.log('改变大小')
      resize()
    }
  )

  const initModel = function () {
    state.label = props.label
    state.value = props.value
    state.width = props.width
    state.height = props.height
    state.style = props.style
    state.fontSize = props.fontSize
    state.fontColor = props.fontColor
    state.borderColor = props.borderColor
    state.outline = props.outline
  }
  let myChart = null
  const init = function () {
    initModel()
    const id = state.id
    if (myChart) {
      myChart.dispose()
    }
    let dom = document.getElementById(id)
    if (!dom) {
      return
    }
    dom.removeAttribute('_echarts_instance_')
    let chart_val = 0.0
    if (state.value && parseFloat(state.value) > 0) {
      chart_val = parseFloat(state.value)
    }
    myChart = echarts.init(document.getElementById(id))
    let option = {
      title: {
        show: false,
      },
      series: [
        {
          type: 'liquidFill', //水位图
          radius: '70%', //显示比例
          center: ['50%', '50%'], //中心点
          amplitude: 6, //水波振幅
          data: [chart_val.toFixed(2)], // data个数代表波浪数
          color: [state.borderColor], //波浪颜色
          /*
                backgroundStyle: {
                    borderWidth: 2, //外边框
                    borderColor: state.borderColor, //边框颜色
                    shadowColor: state.borderColor,
                    shadowBlur: 2
                },
                */
          label: {
            //标签设置
            position: ['50%', '50%'],
            formatter: function () {
              //显示文本,
              let value = '00.00'
              if (chart_val > 0) {
                value = (chart_val * 100).toFixed(2)
              }
              return value + '%'
            },
            fontSize: state.fontSize, //文本字号,
            color: state.fontColor,
          },
          outline: {
            show: state.outline, //最外层边框显示控制
            borderDistance: 8,
            itemStyle: {
              color: 'none',
              //borderColor: '#87CEEB',
              borderWidth: 8,
              borderColor: state.borderColor,
              // shadowBlur: 20,
              // shadowColor: 'rgba(0, 0, 0, 0.25)'
            },
          },
        },
      ],
    }

    if (!state.outline) {
      option.series[0].backgroundStyle = {
        borderWidth: 6, //外边框
        borderColor: state.borderColor, //边框颜色
        shadowColor: state.borderColor,
        shadowBlur: 6,
      }
    }
    myChart.setOption(option, true)
  }

  const resize = function () {
    if (myChart) {
      myChart.resize()
    }
  }
  onMounted(() => {
    state.id = tool.guid()
    nextTick(function () {
      init()
    })
  })
</script>
<style scoped rel="stylesheet/scss" lang="scss">
  .v-figure-content {
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
  }

  .v-figure-label {
    width: 100%;
    height: 24px;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid;
    border-bottom-color: v-bind('state.borderColor');
    font-size: var(--v-base-font-size);
    font-weight: 700;
  }
  .v-figure-chart {
    width: 100%;
    height: calc(100% - 24px);
  }
  .v-figure-footer {
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: row;
    flex-wrap: wrap;
    height: 20px;
    width: 100%;
    border-top: 0.5px solid #dcdfe6;
    justify-content: flex-start;
    align-items: center;
  }
</style>
